<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { parseTime, base64ToFile, debounce } from "../../../utils";
import RecordsInfoApi from '../api/safetyCheck'
import { VueSignaturePad } from 'vue-signature-pad';
import { useRoute } from "vue-router"
import {
  getToken,
} from "../../../utils/auth";
import axios from "axios";
import store from "@/store";

const loadingShow = ref(false)
const isAndroid = /Android|Linux/.test(navigator.userAgent)
const showPopup = ref(false)
const mainActiveIndex = ref(0)
const activeId = ref(1)
const showWrite = ref(false)
const signaturePad = ref();
const addType = ref(0)
const vanFormRef = ref(null)
const writeStatus = ref(0)
const route = useRoute()
const titles = ['班前检查内容', '班中检查内容', '班后检查内容']
const options = ref({
  penColor: '#000000',
  minWidth: 2,
  maxWidth: 2,
  backgroundColor: "rgba(255, 255, 255)",
});

addType.value = route.query.type ? route.query.type : 0
const treeItems = ref([
  {
    text: '宝塔区',
    children: [
      {
        text: '营业厅1',
        id: 1,
      },
      {
        text: '营业厅2',
        id: 2
      }
    ]
  },
  {
    text: '安塞区',
    children: [
      {
        text: '营业厅1',
        id: 3,
      },
      {
        text: '营业厅2',
        id: 4
      }
    ]
  }
])
const router = useRouter();
const msgShow=ref(true)
const onClickLeft = () => history.back();
const fileList = ref([

])
const picId = ref([])
// 新增表单数据
const formState = ref({
  //营业厅
  id: store.getters.deptId,
  BusinessHall: store.getters.deptName,
  //检查日期
  checkDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
  //创建时间
  createTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
  //班次类型
  shift_type: undefined,
  //当前阶段
  current_stage: undefined,
  //创建人id
  created_by: undefined,
  //班前检查字段
  fireExitClear: undefined,
  fireAlarmOk: undefined,
  monitorOk: undefined,
  infraredAlarmOk: undefined,
  safeSecure: undefined,
  equipmentOk: undefined,
  wiringTidy: undefined,
  environmentClean: undefined,
  usbOk: undefined,
  wifiOk: undefined,
  tvOk: undefined,
  passwordOk: undefined,
  linkOk: undefined,
  anSignature: undefined,
  baoSignature: undefined,
  pics: undefined,
  //发现问题
  issues: undefined,
  //处理及落实情况
  solutions: undefined,
  //安全员签名
  secureWrite: undefined,
  //保安签字
  banAnWrite: undefined,
  //班中检查字段
  equipmentStatus: undefined,
  fireAlarmStatus: undefined,
  monitorStatus: undefined,
  orderStatus: undefined,
  contentOk: undefined,
  securityOnDuty: undefined,
  //班后检查字段
  powerOff: undefined,
  doorsLocked: undefined,
  safeLocked: undefined,
  cashSecured: undefined,
  monitorOk: undefined,
  fireAlarmOk: undefined,
  infraredArmed: undefined,
  fileList: [
  ]
})

onMounted(() => {
  getDepTree()
})
const getDepTree = () => {
  //queryTree
  RecordsInfoApi.queryTree({}).then((response) => {

    treeItems.value = buildTree(response.data.data.list)
    console.log(treeItems.value, "接收到的值")
  })
}
const buildTree = (list) => {
  const map = {};
  const roots = [];
  list.forEach((item) => {
    map[item.id] = { ...item, children: [], text: item.name };
  });
  list.forEach((item) => {
    if (item.parentId && map[item.parentId]) {
      map[item.parentId].children.push(map[item.id]);
    } else if (item.parentId === null) {
      roots.push(map[item.id]); // parentId 为 null 的节点作为根节点
    }
  });
  return roots;
}

// 显示日期选择组件
const showCreateTimeDateTimePicker = ref(false);
const onCreateTimeDateTimeConfirm = (value) => {
  formState.value.createTime = parseTime(value, "{y}-{m}-{d}");
  showCreateTimeDateTimePicker.value = false;
};
const showUpdateTimeDateTimePicker = ref(false);
const onUpdateTimeDateTimeConfirm = (value) => {
  formState.value.updateTime = parseTime(value);
  showUpdateTimeDateTimePicker.value = false;
};
// 表单提交
const onSubmit = debounce(() => {
  handleAdd()
}, 1000)

const onFailed = (errorInfo) => {
  Toast.fail('提交失败,完善信息')
  console.log('failed', errorInfo);
}


// 新增
const handleAdd = async () => {
  loadingShow.value = true
  return new Promise(async (resolve, reject) => {
    //班前检查内容

    formState.value.pics = picId.value.join(',')
    if (addType.value == 0) {
      const param = {
        id: '',
        checkDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        shiftType: 1,
        currentStage: 1,
      }
      Object.keys(param).forEach(key => {
        if (formState.value.hasOwnProperty(key)) {
          param[key] = formState.value[key];
        }
      });
      RecordsInfoApi.add(param)
        .then(async (response) => {
          const data = response.data
          if (data.code === 200) {
            const preParam = {
              checkId: data.data,
              fireExitClear: undefined,
              fireAlarmOk: undefined,
              monitorOk: undefined,
              infraredAlarmOk: undefined,
              safeSecure: undefined,
              equipmentOk: undefined,
              wiringTidy: undefined,
              environmentClean: undefined,
              usbOk: undefined,
              wifiOk: undefined,
              tvOk: undefined,
              passwordOk: undefined,
              linkOk: undefined,
              issues: undefined,
              solutions: undefined,
            }
            Object.keys(preParam).forEach(key => {
              if (formState.value.hasOwnProperty(key)) {
                preParam[key] = formState.value[key];
              }
            });
            let preResponse = await RecordsInfoApi.addPreshiftcheck({ ...preParam, anSignature: formState.value.anSignature, baoSignature: formState.value.baoSignature, pics: formState.value.pics })

            if (preResponse.data.code == 200) {
              loadingShow.value = false
              Toast.success('提交成功！')
              router.push('/safetyCheck_bqqiwj3z/list')
            } else {
              msgShow.value=true
              loadingShow.value = false
              Toast.fail(preResponse.message);
            }
          } else {
            loadingShow.value = false
            Toast.fail(data.message);
            reject();
          }
        })
        .catch((error) => {
          if (error.message !== "") {
            Toast.fail(error.message);
          }
          reject(error);
        });
    } else if (addType.value == 1) {
      //班中检查内容：
      const param = {
        checkId: route.query.id,
        shiftType: 2,
        currentStage: 1,
      }
      RecordsInfoApi.update(param).then(async response => {
        const data = response.data
        if (data.code === 200) {
          const preParam = {
            checkId: data.data,
            equipmentStatus: undefined,
            fireAlarmStatus: undefined,
            monitorStatus: undefined,
            orderStatus: undefined,
            securityOnDuty: undefined,
            contentOk: undefined,
            issues: undefined,
            solutions: undefined
          }
          Object.keys(preParam).forEach(key => {
            if (formState.value.hasOwnProperty(key)) {
              preParam[key] = formState.value[key];
            }
          });
          let preResponse = await RecordsInfoApi.addMidshiftcheck({ ...preParam, anSignature: formState.value.anSignature, baoSignature: formState.value.baoSignature, pics: formState.value.pics })

          if (preResponse.data.code == 200) {
            loadingShow.value = false
            Toast.success('提交成功！')
            router.push('/safetyCheck_bqqiwj3z/list')
          } else {
            loadingShow.value = false
            Toast.fail(preResponse.message);
          }
        } else {
          loadingShow.value = false
          Toast.fail(data.message);
          reject();
        }
      })

    } else if (addType.value == 2) {
      //班后检查内容
      const param = {
        checkId: route.query.id,
        shiftType: 3,
        currentStage: 1,
      }
      RecordsInfoApi.update(param).then(async response => {
        const data = response.data
        if (data.code === 200) {
          const preParam = {
            checkId: data.data,
            powerOff: undefined,
            doorsLocked: undefined,
            safeLocked: undefined,
            cashSecured: undefined,
            monitorOk: undefined,
            fireAlarmOk: undefined,
            infraredArmed: undefined,
            issues: undefined,
            solutions: undefined,
            anSignature: undefined,
            pics: undefined,
          }
          Object.keys(preParam).forEach(key => {
            if (formState.value.hasOwnProperty(key)) {
              preParam[key] = formState.value[key];
            }
          });
          let preResponse = await RecordsInfoApi.addPostshiftcheck({ ...preParam, anSignature: formState.value.anSignature, baoSignature: formState.value.baoSignature, pics: formState.value.pics })

          if (preResponse.data.code == 200) {
            loadingShow.value = false
            Toast.success('提交成功！')
            router.push('/safetyCheck_bqqiwj3z/list')
          } else {
            loadingShow.value = false
            Toast.fail(preResponse.message);
          }
        } else {
          loadingShow.value = false
          Toast.fail(data.message);
          reject();
        }
      })
    }

  });
}
const openPopup = () => {
  console.log("点击事件")
  showPopup.value = true;
}

const onNavClick = (index) => {
  mainActiveIndex.value = index;
}
const onItemClick = (data) => {
  activeId.value = data.id;
  formState.value.id = data.id
  formState.value.BusinessHall = data.text
  showPopup.value = false
}
const clearSign = () => {
  signaturePad.value.clearSignature();
};
const closeSign = () => {
  signaturePad.value.clearSignature();
  showWrite.value = false
}
const saveUploadSign = async () => {


  const { isEmpty, data } = signaturePad.value.saveSignature();
  if (isEmpty) return;
  if (!writeStatus.value) {
    formState.value.secureWrite = await changImg(data)
    let writeId = await uploadFile([base64ToFile(formState.value.secureWrite, "qianming.png")])
    formState.value.anSignature = writeId[0].id
  } else {
    formState.value.banAnWrite = await changImg(data)
    let writeId = await uploadFile([base64ToFile(formState.value.banAnWrite, "qianming.png")])
    formState.value.baoSignature = writeId[0].id
  }
  showWrite.value = false
  signaturePad.value.clearSignature();


}
const showWritePopup = (type) => {
  showWrite.value = true;
  writeStatus.value = type
  setTimeout(() => {
    signaturePad.value.clearSignature();
  }, 0)
}
const onRead = (file) => {

  uploadFile([file.file]).then(res => {
    picId.value.push(res[0].id)
  }).catch(error => {

    let deleId = fileList.value.findIndex(targe => {
      return targe.objectUrl == file.objectUrl
    })
    if (deleId != -1) {
      fileList.value.splice(deleId, 1)
    }
  })


}
const beforeDelete = (file) => {
  let deleId = fileList.value.findIndex(targe => {
    return targe.objectUrl == file.objectUrl
  })
  if (deleId != -1) {
    fileList.value.splice(deleId, 1)
    picId.value.splice(deleId, 1)
  }
}
const delImgs = (file, name) => {
  console.log(file, name)
}

async function uploadFile(files) {
  return new Promise(async (resolve, reject) => {
    loadingShow.value = true
    const formData = new FormData();
    files.forEach(file => {
      formData.append('files', file); // 字段名必须与后端@RequestParam("files")匹配
    });
    try {
      const response = await axios.post(import.meta.env.VITE_APP_BASE_API + '/sysfiles/upload', formData, {
        headers: {
          "Authorization": getToken(),
          "Content-Type": "multipart/form-data"
        }
      });

      if (response.data.code != 200) {
        reject('error')
        throw new Error();
      } else {
        resolve(response.data.data)
      }
      loadingShow.value = false
    } catch (error) {
      Toast.fail('文件上传失败');
      loadingShow.value = false
    }
  })

}

const changImg = (base64Image) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = base64Image;
    img.onload = function () {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 旋转 90 度，交换宽高
      canvas.width = img.height;
      canvas.height = img.width;

      // 移动原点到左下角
      ctx.translate(0, canvas.height);
      // 逆时针旋转 90 度，使用负角度
      ctx.rotate(-Math.PI / 2);

      // 绘制图片
      ctx.drawImage(img, 0, 0);

      // 获取旋转后的 Base64 数据
      const rotatedBase64 = canvas.toDataURL('image/png');
      resolve(rotatedBase64)
    }
  })

}
</script>

<template>
  <div>
    <van-nav-bar :title="titles[addType]" left-text="返回" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-form @submit="onSubmit" @failed="onFailed" ref="vanFormRef">
      <!-- 班前检查内容 -->
      <van-cell-group inset v-if="addType == 0">
        <van-cell-group>
          <van-field required readonly is-link v-model="formState.BusinessHall" label="营业厅:" placeholder="请选择营业厅"
            :rules="[{ required: true, message: '请选择营业厅' }]" />
        </van-cell-group>
        <van-field v-model="formState.checkDate" required is-link readonly name="dateTimePicker" label="检查日期:"
          placeholder="点击选择日期" :rules="[{ required: true, message: '请选择日期' }]" />
        <van-field class="groupField" required name="fireExitClear" label="消防通道是否畅通："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.fireExitClear" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="fireAlarmOk" label="火灾报警系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.fireAlarmOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="monitorOk" label="监视系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.monitorOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="infraredAlarmOk" label="红外线报警系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.infraredAlarmOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="safeSecure" label="保险柜是否安全："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.safeSecure" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="equipmentOk" label="照明、营业厅设备及器材是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.equipmentOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="wiringTidy" label="电源线是否捆扎整齐，有无乱接、拉线："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.wiringTidy" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="environmentClean" label="营业环境是否卫生清洁："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.environmentClean" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field class="groupField" required name="usbOk" label="电子屏USB接口是否封堵："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.usbOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field class="groupField" required name="wifiOk" label="无线、有线、蓝牙、红外是否关闭："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.wifiOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field class="groupField" required name="tvOk" label="无线投射功能是否关闭："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.tvOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field class="groupField" required name="passwordOk" label="各类设备密码是否为强口令："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.passwordOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="linkOk" label="是否链接无关网络："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.linkOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>


        <van-cell-group>
          <van-field v-model="formState.issues" required label="发现问题：" type="textarea" placeholder="请输入发现问题" rows="5"
            autosize :rules="[{ required: true, message: '请输入发现问题' }]" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="formState.solutions" required label="处理及落实情况：" type="textarea" placeholder="请输入处理及落实情况"
            rows="5" autosize :rules="[{ required: true, message: '请输入处理及落实情况' }]" />
        </van-cell-group>
        <van-field class="groupField" v-model="formState.secureWrite" required name="secureWrite" label="安全员签名："
          :rules="[{ required: true, message: '请填写安全员签名' }]">
          <template #input>
            <img v-if="formState.secureWrite" :src="formState.secureWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(0)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" v-model="formState.banAnWrite" required name="banAnWrite" label="保安签名："
          :rules="[{ required: true, message: '请填写保安签字' }]">
          <template #input>
            <img v-if="formState.banAnWrite" :src="formState.banAnWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(1)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" required name="fileList" label="相关图片上传："
          :rules="[{ required: true, message: '请上传相关图片' }]">
          <template #input>
            <van-uploader class="addUploader" accept="image/*" v-model="fileList" :after-read="onRead"
              :before-delete="beforeDelete" :capture="isAndroid ? 'camera' : null">
              <van-icon name="photograph" />
            </van-uploader>
          </template>
        </van-field>

      </van-cell-group>
      <!--------------------------------------->
      <!-- 班中检查内容 -->
      <van-cell-group inset v-if="addType == 1">
        <van-field class="groupField" required name="equipmentStatus" label="营业厅设备及器材是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.equipmentStatus" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="fireAlarmStatus" label="火灾报警系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.fireAlarmStatus" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="monitorStatus" label="监视系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.monitorStatus" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="orderStatus" label="营业厅秩序是否良好："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.orderStatus" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="securityOnDuty" label="值班保安是否在岗："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.securityOnDuty" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="contentOk" label="发布内容是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.contentOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-cell-group>
          <van-field v-model="formState.issues" required label="发现问题：" type="textarea" placeholder="请输入发现问题" rows="5"
            autosize :rules="[{ required: true, message: '请输入发现问题' }]" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="formState.solutions" required label="处理及落实情况：" type="textarea" placeholder="请输入处理及落实情况"
            rows="5" autosize :rules="[{ required: true, message: '请输入处理及落实情况' }]" />
        </van-cell-group>
        <van-field class="groupField" v-model="formState.secureWrite" required name="secureWrite" label="安全员签名："
          :rules="[{ required: true, message: '请填写安全员签名' }]">
          <template #input>
            <img v-if="formState.secureWrite" :src="formState.secureWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(0)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" v-model="formState.banAnWrite" required name="banAnWrite" label="保安签名："
          :rules="[{ required: true, message: '请填写保安签字' }]">
          <template #input>
            <img v-if="formState.banAnWrite" :src="formState.banAnWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(1)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" required name="fileList" label="相关图片上传："
          :rules="[{ required: true, message: '请上传相关图片' }]">
          <template #input>
            <van-uploader class="addUploader" accept="image/*" v-model="fileList" :after-read="onRead"
              :before-delete="beforeDelete" :capture="isAndroid ? 'camera' : null">
              <van-icon name="photograph" />
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <!--------------------------------------->

      <!-- 班后检查内容 -->
      <van-cell-group inset v-if="addType == 2">
        <van-field class="groupField" required name="powerOff" label="照明、电器电源是否全部关闭："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.powerOff" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="doorsLocked" label="门窗是否全部关闭并锁好："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.doorsLocked" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="safeLocked" label="保险柜是否锁好，钥匙是否管好或交接好："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.safeLocked" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="cashSecured" label="有价卡及现金是否清点清楚入柜："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.cashSecured" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="monitorOk" label="监视系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.monitorOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="fireAlarmOk" label="火灾报警系统运转是否正常："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.fireAlarmOk" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="groupField" required name="infraredArmed" label="红外线报警系统运转是否正常并进行设防："
          :rules="[{ required: true, message: '请选择是否' }]">
          <template #input>
            <van-radio-group v-model="formState.infraredArmed" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-cell-group>
          <van-field v-model="formState.issues" required label="发现问题：" type="textarea" placeholder="请输入发现问题" rows="5"
            autosize :rules="[{ required: true, message: '请输入发现问题' }]" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="formState.solutions" required label="处理及落实情况：" type="textarea" placeholder="请输入处理及落实情况"
            rows="5" autosize :rules="[{ required: true, message: '请输入处理及落实情况' }]" />
        </van-cell-group>
        <van-field class="groupField" v-model="formState.secureWrite" required name="secureWrite" label="安全员签名："
          :rules="[{ required: true, message: '请填写安全员签名' }]">
          <template #input>
            <img v-if="formState.secureWrite" :src="formState.secureWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(0)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" v-model="formState.banAnWrite" required name="banAnWrite" label="保安签名："
          :rules="[{ required: true, message: '请填写保安签字' }]">
          <template #input>
            <img v-if="formState.banAnWrite" :src="formState.banAnWrite" style="width: 100%;height: 100px;">
            <span style="padding: 20px;" @click="showWritePopup(1)">
              <van-icon name="add" size="30" />
            </span>
          </template>
        </van-field>
        <van-field class="groupField" required name="fileList" label="相关图片上传："
          :rules="[{ required: true, message: '请上传相关图片' }]">
          <template #input>
            <van-uploader class="addUploader" accept="image/*" v-model="fileList" :after-read="onRead"
              :before-delete="beforeDelete" :capture="isAndroid ? 'camera' : null">
              <van-icon name="photograph" />
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <!--------------------------------------->
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-popup v-model:show="showPopup" position="bottom">
      <van-tree-select :items="treeItems" :main-active-index="mainActiveIndex" :active-id="activeId"
        @click-nav="onNavClick" @click-item="onItemClick" />
    </van-popup>
    <van-popup v-model:show="showCreateTimeDateTimePicker" position="bottom">
      <van-datetime-picker type="date" @confirm="onCreateTimeDateTimeConfirm"
        @cancel="showCreateTimeDateTimePicker = false" />
    </van-popup>
    <van-popup v-model:show="showUpdateTimeDateTimePicker" position="bottom">
      <van-datetime-picker type="datetime" @confirm="onUpdateTimeDateTimeConfirm"
        @cancel="showUpdateTimeDateTimePicker = false" />
    </van-popup>
    <van-popup v-model:show="showWrite">
      <div style="width: 90vw; height: 80vh;position: relative;overflow: hidden;">
        <VueSignaturePad ref="signaturePad" class="signature" :options="options" width="100%" height="100%">
        </VueSignaturePad>
        <div style="display: flex; transform: rotate(90deg); gap: 10px;bottom: 100px;left: -50px; position: absolute;">
          <van-button type="danger" @click="closeSign">关闭</van-button>
          <van-button type="warning" @click="clearSign">清屏</van-button>
          <van-button type="primary" @click="saveUploadSign">确认</van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="loadingShow" style="background: transparent;">
      <div>
        <van-loading type="spinner" color="white" style="overflow: hidden;" />
      </div>

    </van-popup>
    <!-- <van-dialog v-model:show="msgShow" :showCancelButton="false" :closeOnClickOverlay="true" title="标题" show-cancel-button>
      <img src="https://img.yzcdn.cn/1.jpg">
    </van-dialog> -->
  </div>
</template>
<style>
.groupField .van-cell__title {
  width: 100%;
  color: #646566;
  margin-bottom: 10px;
}

.groupField {
  display: flex;
  flex-direction: column;
}

.addUploader .van-uploader__input-wrapper {
  display: flex;
  align-items: center;
  padding: 20px;
}

.addUploader .van-icon {
  font-size: 30px;
}
</style>